<template>
  <div id="barrages">
    <input type="text" v-model="info">
    <button @click="submit">发送弹幕</button>
    <button @click="haha">关闭弹幕</button>
    <vue-baberrage
      :isShow="barrageIsShow"
      :barrageList="barrageList"
      :maxWordCount="maxWordCount"
      :throttleGap="throttleGap"
      :loop="barrageLoop"
      :boxHeight="boxHeight"
      :messageHeight="messageHeight"
      :lanesCount="lanesCount"
    >
  </vue-baberrage>
</div>
</template>

<script>
  import { MESSAGE_TYPE } from 'vue-baberrage'
  export default {
    name: "Barrages",
    data() {
      return {
        msg: "芜湖起飞",
        barrageIsShow: true,
        // 消息框全顯示的高度
        messageHeight: 30,
        boxHeight: 412,
        barrageLoop: true,
        maxWordCount: 120,
        throttleGap: 5000,
        barrageList: [],
        lanesCount: 4,
        info:"info"
      };
    },
    computed: {
      // posRender(){
      //   return 3
      // }
    },
    mounted() {
      this.addToList();
    },
    methods: {
      haha(){
        this.barrageIsShow = !this.barrageIsShow;

        console.log("调用完成！")
      },
      submit(){
        // console.log(1)
          console.log(this.barrageList.length+1);
          this.barrageList.push({
          id: 12,
          avatar: "static/a.jpg",
          msg: this.info,
          time: Math.random() * 9 + 3,

          barrageStyle: "blue",
        });
      },
      addToList() {
        let list = [
          {
            id: 1,
            avatar:
              "static/a.jpg",
            msg: this.msg,
            time: Math.random() * 9 + 3,
            barrageStyle: "red",
          },
          {
            id: 2,
            avatar:
              "static/a.jpg",
            msg: this.msg,
            time: Math.random() * 9 + 5,
            barrageStyle: "green",
          },
          {
            id: 3,
            avatar:
              "static/a.jpg",
            msg: this.msg,
            time: Math.random() * 9 + 3,
            barrageStyle: "normal",
          },
          {
            id: 4,
            avatar:
              "static/a.jpg",
            msg: this.msg,
            time: Math.random() * 9 + 5,
            barrageStyle: "blue",
          },
          {
            id: 5,
            avatar:
              "static/a.jpg",
            msg: this.msg,
            time: Math.random() * 9 + 3,
            barrageStyle: "red",
          },
          {
            id: 6,
            avatar:
              "static/a.jpg",
            msg: this.msg,
            time: Math.random() * 9 + 5,
            barrageStyle: "normal",
          },
          {
            id: 7,
            avatar:
              "static/a.jpg",
            msg: this.msg,
            time: Math.random() * 9 + 5,
            barrageStyle: "red",
          },
          {
            id: 8,
            avatar:
              "static/a.jpg",
            msg: this.msg,
            time: Math.random() * 9 + 5,
            barrageStyle: "normal",
          },
          {
            id: 9,
            avatar:
              "static/a.jpg",
            msg: this.msg,
            time: Math.random() * 9 + 5,
            barrageStyle: "red",
          },
          {
            id: 10,
            avatar:
              "static/a.jpg",
            msg: this.msg,
            time: Math.random() * 9 + 5,
            barrageStyle: "yellow",
          },
        ];
        list.forEach((v) => {
          this.barrageList.push({
            id: v.id,
            avatar: v.avatar,
            msg: v.msg,
            time: v.time,
            type: MESSAGE_TYPE.NORMAL,
            barrageStyle: v.barrageStyle,
          });
        });
      },
    },
  };
</script>

<style scoped>
  .barrages-drop
  .blue {
    border-radius: 50px;
    background: #e6ff75;
    color: #fff;
  }

  .green {

    border-radius: 50px;
    background: #75ffcd;
    color: #fff;
  }
  .red {

    border-radius: 50px;
    /*background: #e68fba;*/
    color: #fff;
  }
  .yellow {

    border-radius: 50px;
    background: #dfc795;
    color: #fff;
  }
  .baberrage-stage {
    position: absolute;
    width: 100%;
    height: 300px;
    overflow: hidden;
    top: 0;
    margin-top: 360px;
    /*background: pink;*/
    font-size: 15px;
  }

</style>
